<template>
  <main>
    <a href="/">home</a>
    <form id="payment-form" @submit.prevent="handleSubmit">
      <div>
        <label for="price"><input name="price" id="price">美元</label>
      </div>
            
      <h1>请选择付款卡</h1>
      <ul v-for="(item, index) in objectArray" :key="index">
          <input type="radio" name="paymentMethodId" :id="`option${index}`" v-model="selectedOption" :value="item.paymentMethodId" @change="handleChange">
          <li>序号：{{ index + 1 }}</li>
          <li>方式ID：{{ item.paymentMethodId }}</li>
          <li>卡类型：{{ item.cardBrand }}</li>
          <li>后四位：{{ item.last4Digits }}</li>
      </ul>
      <button id="submit-button">支付</button>
    </form>
      <sr-messages :messages="messages" />
     
  </main>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { loadStripe } from "@stripe/stripe-js";

import SrMessages from "./SrMessages.vue";

const messages = ref([]);
let stripe;


let objectArray = ref([]);
let selectedOption = ""
onMounted(async () => {
const { publishableKey } = await fetch("/api/stripe/config").then((res) => res.json());
stripe = await loadStripe(publishableKey);


// part1  获取已绑定卡
objectArray.value  = await fetch(
    '/api/stripe/bindCardList',
    {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
          customerId: sessionStorage.getItem('stripeCustomerId'),
      }),
    }
  ).then((r) => {
    console.log('第一个then', r)
    return r.json()
  }).then((r) => {
    console.log('第二个then', r)
    return r
  });
  return {
    objectArray
  }
});


//打印一个选择卡片事件， 这个其实没什么用。只是在demo中打个日志
const handleChange = async () => {
  messages.value.push(selectedOption)
  console.log(selectedOption)
}

// part2  提交支付， stripe/paymentIntent 接口创建支付意向信息， 并获取支付意向id
const handleSubmit = async () => {
  const priceInput = document.querySelector('#price');
  messages.value.push(priceInput.value)
  await fetch('/api/stripe/paymentIntent',
      {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            userId: sessionStorage.getItem('id'),
            price: priceInput.value
          }),
        })
        .then(r => r.json())
        .then(data => {
          messages.value.push('支付前')
          // part3 确认支付。这里可以增加确认按钮再去调用也行。 根据产品的流程进行即可
          confirmPayment(data.clientSecret, selectedOption)
        });
        
        
}
// part3 
const confirmPayment = async(clientSecret, selectedOption) => {
          messages.value.push('支付中')
            stripe.confirmCardPayment(clientSecret, {
                payment_method: selectedOption, // 使用已绑定的支付方式
            })
            .then(result => {
                // 获取支付确认返回
                console.log(result)
                if (result.error) {
                    // 处理错误， 我这里错误就没给后端了。真实的业务逻辑中其实也应该给后端
                    // 其实不给也是可以的。 stripe还有一个webhook。 你的系统通过这个钩子来异步的处理这个信息也是没有问题的
                    console.error(result);
                } else {
                    // 支付成功， 同步成功最好能直接给后端一个请求去验证支付是否成功了。 如果成功了， 直接让前端调转到下一个流程
                    console.log(result.paymentIntent.id)
                    messages.value.push("去确认结果")
                    fetch('/api/stripe/checkPayRes',{
                      method: 'POST',
                      headers: {
                        'Content-Type': 'application/json',
                      },
                      body: JSON.stringify({
                        userId: sessionStorage.getItem('id'),
                        paymentIntentId: result.paymentIntent.id
                      }),
                    })
                    .then(r => {
                      console.log('第一个then', r)
                      return r.json()
                    })
                    .then(res => {
                      console.log(res)
                      console.log(res.message)
                      messages.value.push(res.message)
                    })
                }
            });
        }  

</script>